<template>
	<view class="main">
		<view class="left">
			<image src="../static/test.png" mode="aspectFill"></image>
		</view>
		<view class="right">
			<view class="right-top">
				<view class="title">{{props.type ? '温柔的长颈鹿（学员）': 'LISA（教练）'}}</view>
				<u-icon name="trash" color="#d64a42" size="28"></u-icon>
			</view>
			<view class="right-middle" :style="{padding: !props.type ? '10rpx 0 10rpx 0' : ' 4rpx 0 56rpx 0'}">当前评级：助教2档
			</view>
			<view class="right-middle" style="padding: 0;" v-if="!props.type">台球 枫尚台球俱乐部 </view>
			<view class="right-bottom">
				<view class="left" v-if="props.type">台球 枫尚台球俱乐部 </view>
				<view class="left" v-else>学员人数：<text style="color: #4575f6;">99+</text> </view>
				<view class="right" @click="handleSkipStudentDetail">{{props.type ? '学员详情' : '教练详情'}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		type: Number
	})
	// 跳转学员详情
	const handleSkipStudentDetail = () => {
		uni.navigateTo({
			url: `/pages/home/school/studentDetail?type=${props.type}`
		})
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 28rpx;
		display: flex;
		// justify-content: space-between;
		align-items: center;
		box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
		border-radius: 20rpx;

		.left {
			margin-right: 15rpx;
			flex: 1;

			image {
				width: 101rpx;
				height: 142rpx;
				border-radius: 10rpx;
			}
		}

		.right {
			flex: 4;

			.right-top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					opacity: 1;
					/** 文本1 */
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 16.46px;
					color: rgba(51, 51, 51, 1);
				}
			}

			.right-middle {
				opacity: 1;
				/** 文本1 */
				font-size: 8px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 10.98px;
				color: rgba(170, 170, 170, 1);
				padding: 4rpx 0 56rpx 0;
			}

			.right-bottom {
				display: flex;
				justify-content: space-between;

				.left {
					opacity: 1;
					/** 文本1 */
					font-size: 8px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 10.98px;
					color: rgba(170, 170, 170, 1);
					flex: 8;
					display: flex;
					align-items: flex-end;
				}

				.right {
					padding: 10rpx 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1rpx solid #5a80f7;
					opacity: 1;
					/** 文本1 */
					font-size: 10px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 14.48px;
					color: rgba(51, 119, 254, 1);
					border-radius: 30rpx;
				}
			}
		}
	}
</style>